import React = require("react");
import ReactDOM = require("react-dom");
import { ComponentData } from "maishu-jueying";
import { VirtualMobile } from "./virtual-mobile";
import { contextName } from "json!websiteConfig";

requirejs({ context: contextName },['less!controls/mobile-page-display']);
interface Props extends React.Props<MobilePageDisplay> {
    displayMobile?: boolean,
    scale?: number,
    enableMock?: boolean,

    color?: StyleColor,
}
interface State {
    color?: StyleColor,
}
export class MobilePageDisplay extends React.Component<Props, State>{

    virtualMobile: VirtualMobile;
    screenElement: HTMLElement;
    styleColor: StyleColor;

    constructor(props) {
        super(props);
        this.state = { color: this.props.color };
        // this.styleColor = this.props.color;
    }

    changeStyle(style: StyleColor): any {
        this.styleColor = style;
        this.setState({ color: style });
    }

    render() {
        let { scale, displayMobile } = this.props;
        let { color } = this.state;
        displayMobile = displayMobile == null ? true : displayMobile;

        return <VirtualMobile color={color} scale={scale} displayMobile={displayMobile}
            ref={(e) => this.virtualMobile = e || this.virtualMobile} />
    }
}